<template>
  <basic-dialog :visible="show"
                minWidth="460px"
                :title="title"
                :isShowClose="true"
                :isFullScreen="false"
                @close="$emit('close')"
  >
    <div class="content-wrapper">
      <div class="flex justify-between items-end">
        <div>{{ rowData.businessName }}</div>
        <div class="time">{{ rowData.createTime | toNewDate }}</div>
      </div>
      <div class="content-info">{{rowData.content}}</div>
    </div>
  </basic-dialog>
</template>

<script>
import MES from './mes'
import { readMsgBatch } from '../../../../boot/factory/mes-list'
import { mapMutations } from 'vuex'

const { msgIconList } = new MES()

export default {
  name: 'mes-detail',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    rowData: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    title () {
      return msgIconList.get(this.rowData.label)?.name + '消息'
    }
  },
  watch: {
    rowData: {
      immediate: true,
      deep: true,
      handler (val) {
        if (val && val.read === false) {
          const msgId = [val.id]
          readMsgBatch(msgId).then(() => {
            this.SET_NUM({ count: -1, type: 1 })
            val.read = true
          })
        }
      }
    }
  },
  data () {
    return {

    }
  },
  methods: {
    ...mapMutations({
      'SET_NUM': 'mes/SET_NUM'
    })
  }
}
</script>

<style scoped lang="scss">
.content-wrapper{
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  padding: 20px;

  .time{
    color: #999999;
    font-size: 12px;
  }

  .content-info{
    margin-top: 15px;
    white-space: break-spaces;
  }
}
</style>
